// 父元素与局部坐标
import { useEffect } from 'react';

import './App.css';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
function App() {
  useEffect(() => {
    // 1、创建场景
    const sence = new THREE.Scene();

    //2、创建相机
    const camera = new THREE.PerspectiveCamera(
      45,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );

    //3、创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 4、创建几何体
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    const parentMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    const parentCube = new THREE.Mesh(geometry, parentMaterial); // ---父元素
    parentCube.add(cube);
    // 位置设置position
    parentCube.position.set(0, 0, 0); // ---设置父元素位置position
    cube.position.set(3, 3, 0); // ---子元素位置，是相对父元素的局部坐标，子元素以父元素为原点
    // 缩放设置scale
    parentCube.scale.set(2, 2, 2); // ---缩放scale ，父元素缩放，子元素同步缩放
    // 旋转rotation（绕轴旋转）
    parentCube.rotation.x = Math.PI / 8; // 绕X轴旋转45度
    // 5、将网格添加到场景
    sence.add(parentCube); //----

    // 6、设置相机位置
    camera.position.z = 5;
    camera.position.x = 3;
    camera.position.y = 2;
    camera.lookAt(0, 0, 0);

    // 添加世界坐标辅助器与轨道控制器
    const axesHelper = new THREE.AxesHelper(5);
    sence.add(axesHelper);
    const controls = new OrbitControls(camera, renderer.domElement);
    // controls.autoRotate = true;
    controls.dampingFactor = 0.5;
    //7、渲染
    function animate() {
      controls.update();
      requestAnimationFrame(animate);
      // cube.rotation.x += 0.01;
      // cube.rotation.y += 0.01;
      renderer.render(sence, camera);
    }
    animate();
  }, []);

  return <div></div>;
}

export default App;
